<template>
	<view class="padding-30">
		<view class="padding-30 bg-fff border-radius20 margin-bottom30">
			<view class="flex-between padding-bottom30 f-divider1 margin-bottom30">
				<view class="fontSize-15 color-000 margin-right20">关系</view>
				<view class="flex-alignItems-center" @click="relationShow = true">
					<view class="fontSize-15 color-000 margin-right10" v-if="relationName">{{relationName}}</view>
					<view class="fontSize-15 color-999 margin-right10" v-else>请选择与本人关系</view>
					<u-icon name="arrow-right" color="#666666" size="18"></u-icon>
				</view>
			</view>
			<view class="flex-between padding-bottom30 f-divider1 margin-bottom30">
				<view class="fontSize-15 color-000 margin-right20">姓名</view>
				<input type="text" v-model="form.name" placeholder="请输入姓名" class="input-item"/>
			</view>
			<view class="flex-between padding-bottom30 f-divider1 margin-bottom30">
				<view class="fontSize-15 color-000 margin-right20">性别</view>
				<view class="flex-alignItems-center" @click="genderShow = true">
					<view class="fontSize-15 color-000 margin-right10" v-if="genderName">{{genderName}}</view>
					<view class="fontSize-15 color-999 margin-right10" v-else>请选择</view>
					<u-icon name="arrow-right" color="#666666" size="18"></u-icon>
				</view>
			</view>
			<view class="flex-between padding-bottom30 f-divider1 margin-bottom30">
				<view class="fontSize-15 color-000 margin-right20">年龄</view>
				<view class="flex-alignItems-center" @click="birthdayShow = true">
					<view class="fontSize-15 color-000 margin-right10" v-if="birthdayName">{{birthdayName}}</view>
					<view class="fontSize-15 color-999 margin-right10" v-else>请选择</view>
					<u-icon name="arrow-right" color="#666666" size="18"></u-icon>
				</view>
			</view>
			<view class="flex-between padding-bottom30 f-divider1 margin-bottom30">
				<view class="fontSize-15 color-000 margin-right20">身份证号</view>
				<input type="text" v-model="form.card" placeholder="请输入身份证号" class="input-item"/>
			</view>
			<view class="flex-between padding-bottom30 f-divider1 margin-bottom30">
				<view class="fontSize-15 color-000 margin-right20">民族</view>
				<view class="flex-alignItems-center" @click="nationShow= true">
					<view class="fontSize-15 color-000 margin-right10" v-if="nationName">{{nationName}}</view>
					<view class="fontSize-15 color-999 margin-right10" v-else>请选择民族</view>
					<u-icon name="arrow-right" color="#666666" size="18"></u-icon>
				</view>
			</view>
			<!-- <view class="flex-between padding-bottom30 f-divider1 margin-bottom30">
				<view class="fontSize-15 color-000 margin-right20">文化程度</view>
				<view class="flex-alignItems-center" @click="educationShow= true">
					<view class="fontSize-15 color-000 margin-right10" v-if="educationName">{{educationName}}</view>
					<view class="fontSize-15 color-999 margin-right10" v-else>请选择</view>
					<u-icon name="arrow-right" color="#666666" size="18"></u-icon>
				</view>
			</view> -->
			<view class="flex-between padding-bottom30 f-divider1 margin-bottom30">
				<view class="fontSize-15 color-000 margin-right20">手机号码</view>
				<input type="number" maxlength="11" v-model="form.mobile" placeholder="请输入手机号码" class="input-item"/>
			</view>
			<view class="flex-between padding-bottom30 f-divider1 margin-bottom30">
				<view class="fontSize-15 color-000 margin-right20">地址</view>
				<view class="flex-alignItems-center" @click="show = true">
					<view class="fontSize-15 color-000 margin-right10" v-if="area">{{area}}</view>
					<view class="fontSize-15 color-999 margin-right10" v-else>请选择地址</view>
					<u-icon name="arrow-right" color="#666666" size="18"></u-icon>
				</view>
			</view>
			<view class="flex-between padding-bottom30 f-divider1 margin-bottom30">
				<view class="fontSize-15 color-000 margin-right20">详细地址</view>
				<input type="text" v-model="form.address" placeholder="请输入详细地址" class="input-item"/>
			</view>
		</view>
		
		<!-- 选择绑定医生 -->
		<view class="padding-30 bg-fff flex-between border-radius20 margin-bottom30">
			<view class="fontSize-15 color-000">选择绑定医生</view>
			<template v-if="doctors.id">
				<view class="flex-alignItems-center">
					<image class="img-68 border-50radius margin-right20" :src="doctors.avatar" mode=""></image>
					<view class="fontSize-15 color-000">
						{{doctors.nickname}}
					</view>
				</view>
				<view class="binding-btn1 flex-center" @click="$tools.navigateTo('/pages/index/bind-doctors')">前往绑定</view>
			</template>
			<template v-else>
				<view class="binding-btn flex-center" @click="$tools.navigateTo('/pages/index/bind-doctors')">前往绑定</view>
			</template>
		</view>
		
		<!-- 紧急联系人 -->
		<view class="padding-30 bg-fff border-radius20 margin-bottom30">
			<view class="flex-between padding-bottom30 f-divider1 margin-bottom30">
				<view class="fontSize-15 color-000 margin-right20">紧急联系人姓名</view>
				<input type="text" v-model="form.emergency_contact_name" placeholder="请输入紧急联系人姓名" class="input-item"/>
			</view>
			<view class="flex-between padding-bottom30 f-divider1 margin-bottom30">
				<view class="fontSize-15 color-000 margin-right20">紧急联系人电话</view>
				<input type="number" v-model="form.emergency_contact_mobile" maxlength="11" placeholder="请输入紧急联系人电话" class="input-item"/>
			</view>
		</view>
		
		<!-- 设为默认就诊人 -->
		<view class="padding-30 bg-fff flex-between border-radius20 margin-bottom30">
			<view class="fontSize-15 color-000">设为默认就诊人</view>
			<u-switch v-model="is_default"></u-switch>
		</view>
		
		<!-- 底部操作栏 -->
		<view style="height: 200rpx;"></view>
		<view class="position-fixed-bottom padding-30 bg-fff">
			<view class="btn50-0165FD-15ffffff flex-center" @click="SubmitEvent">
				提交
			</view>
		</view>
		
		<!-- 配偶 -->
		<u-picker :show="relationShow" :columns="relationColumns" @cancel="relationCancel" @confirm="relationConfirm"></u-picker>
		<!-- 性别 -->
		<u-picker :show="genderShow" :columns="genderColumns" @cancel="genderCancel" @confirm="genderConfirm"></u-picker>
		<!-- 生日 -->
		<u-datetime-picker :minDate="-946800000" :maxDate="Number(new Date())" :show="birthdayShow" v-model="birthdayValue" mode="date" @cancel="birthdayCancel" @confirm="birthdayConfirm"></u-datetime-picker>
		<!-- 地址 -->
		<u-picker @confirm="confirm" @cancel="show=false" :show="show" ref="uPicker" keyName="name" :loading="loading" :columns="columns" @change="changeHandler">
		</u-picker>
		<!-- 民族 -->
		<u-picker :show="nationShow" :columns="nationColumns" @cancel="nationCancel" @confirm="nationConfirm"></u-picker>
		<!-- 文化程度 -->
		<u-picker :show="educationShow" :columns="educationColumns" @cancel="educationCancel" @confirm="educationConfirm"></u-picker>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'
	export default {
		data(){
			return{
				form:{
					relation:'',//与本人关系
					name:'', //就诊人姓名
					gender:'',// 性别
					birthday:'',// 出生日期
					card:'',//身份证号
					nation:'',// 民族
					area:'',//地区
					address:'' ,// 详情信息
					mobile:'' ,//手机号码
					doctor:'', // 医生id
					is_default:0, //是否默认就诊人0=否,1=是
					emergency_contact_name:'',//紧急联系人姓名
					emergency_contact_mobile:'',//紧急联系人电话
				},
				// 配偶
				relationShow:false,
				relationColumns:[],
				relationName:'',
				// 性别
				genderShow:false,
				genderColumns:[
					['男','女']  //性别:0=女,1=男
				],
				genderName:'',
				// 生日
				birthdayShow:false,
				birthdayValue:Number(new Date()),
				birthdayName:'',
				// 民族
				nationShow:false,
				nationColumns:[],
				nationName:'',
				// 文化程度
				educationShow:false,
				educationColumns:[
					['研究生','本科','专科','中专或技校','高中','初中及以下']
				],
				educationName:'',
				// 地址
				show: false,
				columns: [
					[],
					[]
				],
				columnData: [
					[],
					[],
					[]
				],
				// addrId:{
				// 	provinceId:'',
				// 	cityId:'',
				// 	districtId:''
				// },
				area:'',//地区
				loading: false,
				doctors:{} ,// 医生
				// 默认
				is_default:false,
				// 就诊人id
				jiuzhen_id:''
			}
		},
		onLoad(e) {
			if(e.id){
				this.jiuzhen_id = e.id
				this.getSickDetail()
			}
			this.initData()
			this.getConfig()
		},
		onShow() {
			if (this.$store.state.petSelect.petList.id) {
				this.doctors = this.$store.state.petSelect.petList
			}
		},
		onHide() {
			this.deletePetSelect()
		},
		methods:{
			...mapMutations(['deletePetSelect']),
			// 详情
			async getSickDetail(){
			    let res = await this.$http.post(this.$api.sick_detail,{id:this.jiuzhen_id},{token:true})
				console.log(res)
				if(res.code == 1){
					this.relationName = res.data.relation
					this.form.relationName = res.data.relationName
					this.form.name = res.data.name
					this.form.gender = res.data.gender
					this.genderName = res.data.gender == 0?'女':'男'
					this.form.birthday = res.data.birthday
					this.birthdayName = res.data.birthday
					this.form.card = res.data.card
					this.form.nation = res.data.nation
					this.nationName = res.data.nation
					this.form.mobile = res.data.mobile
					this.form.area = res.data.area
					this.area = res.data.area
					this.form.address = res.data.address
					this.doctors = res.data.doctor
					this.form.emergency_contact_name = res.data.emergency_contact_name
					this.form.emergency_contact_mobile = res.data.emergency_contact_mobile
					this.form.is_default = res.data.is_default
					this.is_default = res.data.is_default == 0?false:true
				}
			},
			// 提交
			async SubmitEvent(){
				this.form.relation = this.relationName
				this.form.gender = this.genderName == '男'?1:0
				this.form.birthday = this.birthdayName
				this.form.nation = this.nationName
				this.form.area = this.area
				this.form.doctor = this.doctors.id
				this.form.is_default = this.is_default?1:0
				if(!this.form.relation) return this.$tools.toast('请选择与本人关系')
				if(!this.form.name) return this.$tools.toast('请填写就诊人姓名')
				if(!this.form.birthday) return this.$tools.toast('请选择出生日期')
				if(!this.form.card) return this.$tools.toast('请填写身份证号码')
				if(!this.form.nation) return this.$tools.toast('请选择民族')
				if(!this.form.area) return this.$tools.toast('请选择地区')
				if(!this.form.address) return this.$tools.toast('请填写详细地址')
				if(!this.form.mobile) return this.$tools.toast('请填写手机号码')
				if(!this.form.doctor) return this.$tools.toast('请绑定医生')
				if(!this.form.emergency_contact_name) return this.$tools.toast('请填写紧急联系人姓名')
				if(!this.form.emergency_contact_mobile) return this.$tools.toast('请填写紧急联系人电话')
				if(this.jiuzhen_id){
					this.form.id = this.jiuzhen_id
					let res = await this.$http.post(this.$api.sick_edit,this.form,{token:true})
					if(res.code == 1){
						this.$tools.toast('修改成功')
						this.$tools.navigateBack(1,200)
					}
				}else{
					let res = await this.$http.post(this.$api.sick_add,this.form,{token:true})
					if(res.code == 1){
						this.$tools.toast('添加成功')
						this.$tools.navigateBack(1,200)
					}
				}
			},
			// 确认文化程度
			educationConfirm(e){
				this.educationName = e.value[0]
				this.educationShow = false
			},
			// 取消文化程度
			educationCancel(){
				this.educationName = ''
				this.educationShow = false
			},
			// 确认民族
			nationConfirm(e){
				this.nationName = e.value[0]
				this.nationShow = false
			},
			// 取消民族
			nationCancel(){
				this.nationName = ''
				this.nationShow = false
			},
			// 生日确认选择
			birthdayConfirm(e){
				console.log(e)
				this.birthdayName = this.$T.timeFormat(e.value).substr(0,10)
				this.birthdayShow = false
			},
			// 取消生日选择
			birthdayCancel(){
				this.birthdayName = ''
				this.birthdayShow = false
			},
			// 性别确认
			genderConfirm(e){
				this.genderName = e.value[0]
				this.genderShow = false
			},
			// 性别取消
			genderCancel(){
				this.genderName = ''
				this.genderShow = false
			},
		    // 配偶确认
			relationConfirm(e){
				this.relationName = e.value[0]
				this.relationShow = false
			},
			// 配偶取消
			relationCancel(){
				this.relationName = ''
				this.relationShow = false
			},
			// 获取配置信息
			async getConfig(){
				let res = await this.$http.post(this.$api.config,{},{})
				if(res.code){
					// 关系
					let value1 = res.data.关系.split(',')
					this.relationColumns.push(value1)
					// 民族
					let value2 = res.data.民族.split(',')
					this.nationColumns.push(value2)
					// 文化程度
					// let value3 = res.data.民族.split(',')
					// this.nationColumns.push(value3)
				}
			},
			// 改变地址
			changeHandler(e) {
				const {
					columnIndex,
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				if (columnIndex === 0) {
					this.loading = true
					this.$http.post(this.$api.area,{
						pid:this.columns[columnIndex][index].id,
					},{token:true}).then((res)=>{
						if(res.code==1){
							let columns=[[...this.columns[0]],[],[]]
							columns[1]=[...res.data]
							// console.log(res.data[0].id)
							// return
							this.$http.post(this.$api.area,{
								pid:res.data[0].id
							},{token:true}).then((res2)=>{
								if(res2.code==1){
									columns[2]=[...res2.data]
									picker.setColumnValues(1,columns[1])
									picker.setColumnValues(2,columns[2])
									this.columns=[...columns]
									this.loading=false
								}
							})
						}
					})
				}else if(columnIndex === 1){
					this.loading = true
					this.$http.post(this.$api.area,{
						pid:this.columns[columnIndex][index].id
					},{token:true}).then((res)=>{
						if(res.code==1){
							let columns=[[...this.columns[0]],[...this.columns[1]],[]]
							columns[2]=[...res.data]
							picker.setColumnValues(1,...columns)
							this.columns=[...columns]
							this.loading=false
						}
					})
				}
			},
			confirm(e) {
				console.log(e)
				this.area = e.value[0].name+',' + e.value[1].name+',' + e.value[2].name
				// let addr=[]
				// this.addrId.provinceId=e.value[0].id
				// this.addrId.cityId=e.value[1].id
				// this.addrId.districtId=e.value[2].id
				// addr.push(e.value[0].name,e.value[1].name,e.value[2].name)
				// this.forms.area=addr.join(" ")
				this.form.area = this.area
				this.show=false
			},
			// 重置地址
			initData() {
				uni.showLoading({
					title:'加载中...',
					mask:true
				})
				this.$http.post(this.$api.area,{
					pid:0
				},{token:true}).then((res)=>{
					if(res.code==1){
						let columns=[[],[],[]]
						columns[0]=[...res.data]
						this.$http.post(this.$api.area,{
							pid:res.data[0].id,
						},{token:true}).then((res2)=>{
							if(res2.code==1){
								columns[1]=[...res2.data]
								this.$http.post(this.$api.area,{
									pid:res2.data[0].id,
								},{token:true}).then((res3)=>{
									if(res3.code==1){
										columns[2]=[...res3.data]
										this.$refs.uPicker.setColumnValues(1,columns[1])
										this.$refs.uPicker.setColumnValues(2,columns[2])
										this.columns=[...columns]
										console.log(this.columns)
										uni.hideLoading()
									}
								})
							}
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.binding-btn1{
		width: 140rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #0165FD;
		border-radius: 27rpx 27rpx 27rpx 27rpx;
		border: 1rpx solid #0165FD;
	}
	.binding-btn{
		width: 140rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #4D4D4D;
		border-radius: 27rpx 27rpx 27rpx 27rpx;
		border: 1rpx solid #DBDBDB;
	}
</style>